
.toggle-button {
    -fx-focus-color: transparent;
}

.table-view {
    -fx-border-width: 0;
    -fx-focus-color: transparent;
}

.table-view .column-header-background {
	-fx-opacity: 0.8;
    -fx-border-width: 1;
    -fx-background-insets: 0;
}
.table-view .column-header, .table-view .filler {
    -fx-border-width: 0.8 ;
}

.table-view .column-header .label {
    -fx-text-fill: derive(grey, -20%);
    -fx-font-size: 12px;
}

.table-view .table-cell {
    -fx-border-color: transparent;
    -fx-text-fill: white;
}
.table-view  .table-row-cell:filled:selected:focused, .table-row-cell:filled:selected {
    -fx-background-color: rgba(0,0,0,0.1);
}

#title {
	-fx-font-size: 20.0;
	-fx-font-smoothing-type: gray;
	-fx-font-style: italic;
	-fx-text-fill: white;
}

#header {
    -fx-padding: 10.0px;
    -fx-background-image: url("images/top-bar.png");
    -fx-background-size: cover;
    -fx-background-position: left top;
    -fx-background-repeat: no-repeat;
}

#toolBar {
	-fx-border-image-source: url("images/mid-bar.png");
    -fx-border-image-slice: 1.0 0.0 1.0 0.0 fill;
    -fx-border-image-width: 1.0 0.0 1.0 0.0;
    -fx-border-image-repeat: stretch;
    -fx-padding: -1.0px 0.0px 0.0px 0.0px;
    -fx-spacing: 0.0;
}

#toolBar HBox {
    -fx-fill-height: true;
    -fx-alignment: center-left;
}

#toolBar .button {
    -fx-background-color: null;
    -fx-background-radius: 0.0;
    -fx-background-insets: 0.0;
    -fx-padding: 3.0px 6.0px 4.0px 6.0px;
    -fx-border-color: transparent #6e737d transparent rgba(255.0,255.0,255.0,0.3) , transparent rgba(255.0,255.0,255.0,0.3) transparent transparent;
    -fx-border-insets: 0.0, 0.0 1.0 0.0 1.0;
}

#toolBar .button:hover {
    -fx-background-color: rgba(255.0,255.0,255.0,0.4);
}

#toolBar #addButton, #toolBar #removeButton {
    -fx-border-color: transparent transparent transparent #6e737d , transparent transparent transparent rgba(255.0,255.0,255.0,0.3);
    -fx-border-insets: 0.0, 0.0 1.0 0.0 1.0;
}

#toolBar .button:focused, #toolBar #addButton:focused, #toolBar #removeButton:focused  {
    -fx-border-color: -fx-focus-color;
    -fx-border-width: 0.8;
}

#addButton {
	-fx-background-image: url("images/add.png");
    -fx-background-size: 18.0 18.0;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;   
}

#removeButton {
	-fx-background-image: url("images/remove.png");
    -fx-background-size: 18.0 18.0;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;   
}

.playButton {
	-fx-background-image: url("images/play.png");
    -fx-background-size: 18.0 18.0;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;   
    -fx-focus-color: transparent;
}

.pauseButton {
	-fx-background-image: url("images/pause_blue.png");
    -fx-background-size: 18.0 18.0;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;   
    -fx-focus-color: transparent;
}

.stopButton {
	-fx-background-image: url("images/stop.png");
    -fx-background-size: 18.0 18.0;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;  
    -fx-focus-color: transparent; 
}

#mediaController {

  -fx-border-radius: 10 10 10 10;
  -fx-background-radius: 10 10 10 10;
  -fx-border-color: gray;

  /* top-left, top-right, bottom-right, and bottom-left corners, in that order. */
}

#mediaStatus {
	-fx-text-fill: derive(grey, -10%);
    -fx-font-size: 12px;
}



